@tailwind base;
@layer base {
  html {
    background-color: #1e293b;
    color: #66b851;
    font-size: 0.8rem;
  }
  .text-primary-color {
    color: #66b851;
  }
  .error {
    @apply text-red-600 text-sm;
  }
  .item-disable{
    @apply text-gray-400 bg-gray-600 opacity-50 cursor-not-allowed;
  }
  .bar-bg {
    background-color: #1c1b22;
  }
  .bar-border {
    border-color: #1c1b22;
  }
  .bar-bg-light {
    background-color: #373C44;
  }
  .bar-border-light {
    border-color: #373C44;
  }
  .bar-border-light:hover {
    border-color: #1c1b22;
    background-color: #373C44;
  }
  .bar-bg-primary {
    background-color: #66b851;
  }
  .btn {
    @apply px-4 py-1 text-lg rounded flex-none;
  }
  .btn:hover {
    @apply text-gray-400 cursor-pointer;
  }
  .flex-container {
    @apply flex justify-between items-center;
  }
  .flex-center-box {
    @apply flex justify-center items-center;
  }
  .flex-start-box {
    @apply flex justify-start items-start;
  }
  .flex-field {
    @apply flex flex-col justify-center items-start;
  }
  .input {
    @apply block w-full px-4 py-2 mt-2 border rounded-md bg-gray-800 text-gray-300 border-gray-600 focus:ring-blue-300 focus:ring-opacity-40 focus:border-blue-300 focus:outline-none focus:ring;
  }
  /** modal **/
  .modal-confirm-button {
    @apply text-green-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center bg-[#66b851]; 
  }
  .modal-confirm-button:hover {
      @apply bg-green-300 ;
  }
  .modal-confirm-button:focus {
      @apply ring-4 outline-none ring-[#66b851];
  }
  .modal-label {
    @apply block mb-2 text-sm font-medium text-gray-300;
  }
  .modal-input {
    @apply  border  text-sm rounded-lg  block w-full p-2.5 bg-gray-600 border-gray-500 placeholder-gray-400 text-white;
  }
  .modal-input:focus {
    @apply ring-blue-500 border-blue-500;
  }
  /* .tab-item {
    @apply px-5 py-1 border-b-2 border-gray-700 cursor-pointer;
  } */
  .tab-btn {
    color: #66b851;
    border-color: #66b851;
    @apply px-4 text-base rounded flex-none border;
  }
  .tab-btn:hover {
    @apply text-gray-400 cursor-pointer;
  }
  .tab-head-active {
    color: #66b851;
    border-color: #66b851;
  }
  .tab-body-active {
    @apply block;
  }
}
@tailwind components;
@layer components {
  [data-tip] {
    position: relative;
  }
  [data-tip]:before {
    content: "";
    /* hides the tooltip when not hovered */
    display: none;
    content: "";
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #1a1a1a;
    position: absolute;
    top: 30px;
    left: 35px;
    z-index: 8;
    font-size: 0;
    line-height: 0;
    width: 0;
    height: 0;
  }
  [data-tip]:after {
    display: none;
    content: attr(data-tip);
    position: absolute;
    top: 35px;
    left: 0px;
    padding: 5px 8px;
    background: #1a1a1a;
    color: #fff;
    z-index: 9;
    font-size: 0.75em;
    height: 18px;
    line-height: 18px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    white-space: nowrap;
    word-wrap: normal;
  }
  [data-tip]:hover:before,
  [data-tip]:hover:after {
    display: block;
  }
}
@tailwind utilities;